<template>
  <div class="songGroupAll-container">
    <!-- 精品歌单 -->
    <!-- 背景图片模糊处理 -->
    <div class="bg" v-if="highQualityPlayListFirst[0]" :style="`background-image: url(${highQualityPlayListFirst[0].coverImgUrl})`"></div>
    <div class="recommendSongGroup" v-if="highQualityPlayListFirst[0]" v-show="canFind" @click="goHighQuality">
      <img :src="highQualityPlayListFirst[0].coverImgUrl" alt="" />
      <h2>精品歌单</h2>
      <h4>{{ highQualityPlayListFirst[0].name }}</h4>
      <p>{{ highQualityPlayListFirst[0].copywriter }}</p>
    </div>
    <!-- 内容区域 -->
    <div class="songGroupBox">
      <div class="songGroupBox-head clearfix">
        <!-- 歌单分类 -->
        <div class="type" @click="showBox">{{ targetType === '全部' ? '全部歌单' : targetType }}></div>
        <div class="type-box" v-show="showBoxState">
          <div class="type-box-head" @click="changeBgc">
            <span :class="{ active: targetType === '全部' }">全部歌单</span>
          </div>
          <div class="type-box-body">
            <div class="item clearfix">
              <div class="title">语种</div>
              <ul>
                <li v-for="(item, index) in languageList" :key="index" @click="changeInTypeBox(item.name)">
                  <span :class="{ active: targetType === item.name }">{{ item.name }}</span>
                </li>
              </ul>
            </div>
            <div class="item clearfix">
              <div class="title">风格</div>
              <ul>
                <li v-for="(item, index) in styleList" :key="index" @click="changeInTypeBox(item.name)">
                  <span :class="{ active: targetType === item.name }">{{ item.name }}</span>
                </li>
              </ul>
            </div>
            <div class="item clearfix">
              <div class="title">场景</div>
              <ul>
                <li v-for="(item, index) in sceneList" :key="index" @click="changeInTypeBox(item.name)">
                  <span :class="{ active: targetType === item.name }">{{ item.name }}</span>
                </li>
              </ul>
            </div>
            <div class="item clearfix">
              <div class="title">情感</div>
              <ul>
                <li v-for="(item, index) in emotionList" :key="index" @click="changeInTypeBox(item.name)">
                  <span :class="{ active: targetType === item.name }">{{ item.name }}</span>
                </li>
              </ul>
            </div>
            <div class="item clearfix">
              <div class="title">主题</div>
              <ul>
                <li v-for="(item, index) in themeList" :key="index" @click="changeInTypeBox(item.name)">
                  <span :class="{ active: targetType === item.name }">{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 热门歌单分类 -->
        <ul class="hot-type">
          <li v-for="item in hotPlayList" :key="item.id" :class="{ active: targetType === item.name }" @click="change(item.name)">{{ item.name }}</li>
        </ul>
      </div>
      <div class="songGroupBox-body">
        <div class="songGroups">
          <SongGroup v-for="item in topPlayList" :key="item.id" :id="item.id" :name="item.name" :pic="item.coverImgUrl" :playCount="item.playCount"></SongGroup>
        </div>
        <el-pagination background :current-page="currentPage" :page-size="50" :pager-count="9" layout="prev,pager,next" :total="topPlayListTotal" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SongGroup from '@/components/SongGroup/SongGroup.vue'

import { getHotPlayListAPI, getCatlistPlayListAPI, getTopPlayListAPI, getHighQualityPlayListTagsAPI, getHighQualityPlayListAPI } from '@/api/songGroupAPI.js'

export default {
  name: 'SongGroupAll',
  components: {
    SongGroup
  },
  data() {
    return {
      hotPlayList: [],
      // active: null,
      catlistPlayList: [],
      // 语种主题
      languageList: [],
      // 风格主题
      styleList: [],
      // 场景主题
      sceneList: [],
      // 情感主题
      emotionList: [],
      // 主题主题
      themeList: [],
      targetType: '全部',
      showBoxState: false,
      topPlayListTotal: null,
      topPlayList: [],
      currentPage: 1,
      offset: 0,
      highQualityTagNameList: [],
      canFind: true,
      highQualityPlayListFirst: []
    }
  },
  created() {
    this.initHotPlayList()
    this.initCatlistPlayList()
    this.initHighQualityTagList()
    this.initTopPlayList()
    this.initHighQualityPlayList()
  },
  methods: {
    // 获取热门歌单分类
    async initHotPlayList() {
      const {
        data: { tags: res }
      } = await getHotPlayListAPI()
      this.hotPlayList = res
    },
    change(name) {
      this.targetType = name
      this.showBoxState = false
    },
    changeBgc() {
      this.targetType = '全部'
      this.showBoxState = false
    },
    changeInTypeBox(name) {
      this.targetType = name
      this.showBoxState = false
    },
    showBox() {
      this.showBoxState = !this.showBoxState
    },
    // 获取歌单分类
    async initCatlistPlayList() {
      const { data: res } = await getCatlistPlayListAPI()
      this.catlistPlayList = res.sub
      // 语种
      this.languageList = this.formatCatlist(this.catlistPlayList, 0)
      // 风格
      this.styleList = this.formatCatlist(this.catlistPlayList, 1)
      // 场景
      this.sceneList = this.formatCatlist(this.catlistPlayList, 2)
      // 情感
      this.emotionList = this.formatCatlist(this.catlistPlayList, 3)
      // 主题
      this.themeList = this.formatCatlist(this.catlistPlayList, 4)
    },
    // 按类型拆分歌单分类
    formatCatlist(arr, key) {
      let answer = []
      arr.filter((item) => {
        if (item.category === key) {
          answer.push(item)
        }
      })
      return answer
    },
    // 获取歌单（网友精选）
    async initTopPlayList() {
      const { data: res } = await getTopPlayListAPI(this.targetType, this.offset)
      this.topPlayListTotal = res.total
      this.topPlayList = res.playlists
    },
    // 获取页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.offset = (val - 1) * 50
      this.$router.push({
        path: '/find-music/song-group-all',
        query: {
          cat: this.targetType,
          offset: this.offset
        }
      })
    },
    // 路由跳转到精品歌单页面
    goHighQuality() {
      this.$router.push({
        path: '/find-music/high-quality',
        query: {
          cat: this.targetType,
          limit: 30
        }
      })
    },
    // 获取精品歌单列表标签
    async initHighQualityTagList() {
      const { data: res } = await getHighQualityPlayListTagsAPI()
      this.highQualityTagNameList = res.tags.map((item) => {
        return item.name
      })
    },
    // 获取精品歌单列表中第一个歌单
    async initHighQualityPlayList() {
      const { data: res } = await getHighQualityPlayListAPI(this.targetType, 1)
      this.highQualityPlayListFirst = res.playlists
    }
  },
  watch: {
    // 变更类型后
    targetType() {
      // 重置回第一页
      this.currentPage = 1
      this.handleCurrentChange(this.currentPage)
      this.initTopPlayList()
      // 判断精选歌单是否显示
      if (this.targetType === '全部' || this.highQualityTagNameList.includes(this.targetType)) {
        this.canFind = true
      } else {
        this.canFind = false
      }
      this.initHighQualityPlayList()
    },
    // 监听 offset 变化，实现页面的切换
    $route: {
      handler(newVal) {
        if (newVal.path === '/find-music/song-group-all') {
          this.offset = newVal.query.offset
          this.currentPage = this.offset / 50 + 1
          this.initTopPlayList()
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.songGroupAll-container {
  position: relative;
  margin: 0 auto;
  width: 1088px;
  .bg {
    width: 100%;
    height: 165px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
  }
  .recommendSongGroup {
    position: absolute;
    top: 0;
    width: 100%;
    height: 165px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    cursor: pointer;
    img {
      position: absolute;
      top: 50%;
      margin-top: -70px;
      left: 15px;
      width: 140px;
      height: 140px;
      border-radius: 5px;
    }
    h2 {
      position: absolute;
      top: 30px;
      left: 170px;
      width: 100px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-weight: 400;
      color: #e7aa5a;
      border: 1px solid #e7aa5a;
      border-radius: 15px;
    }
    h4 {
      position: absolute;
      top: 80px;
      left: 170px;
      font-weight: 500;
      color: #fff;
    }
    p {
      position: absolute;
      top: 105px;
      left: 170px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .songGroupBox {
    margin-top: 10px;
    .songGroupBox-head {
      position: relative;
      .type {
        float: left;
        width: 98px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        background-color: #fff;
        border: 1px solid #d8d8d8;
        border-radius: 14px;
        cursor: pointer;
        &:hover {
          background-color: #f2f2f2;
        }
      }
      .type-box {
        position: absolute;
        z-index: 1;
        top: 35px;
        left: 0;
        width: 720px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
        .type-box-head {
          width: 720px;
          height: 55px;
          font-size: 14px;
          border-bottom: 1px solid #e5e5e5;
          &:hover {
            color: #ec4141;
          }
          span {
            float: left;
            margin-top: 12.5px;
            margin-left: 15px;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            // background-color: #fff;
            border-radius: 15px;
          }
        }
        .type-box-body {
          // background-color: #fff;
          .title {
            float: left;
            margin-top: 15px;
            width: 100px;
            font-size: 14px;
            color: #cfcfcf;
          }
          ul {
            overflow: hidden;
            li {
              float: left;
              width: 100px;
              height: 50px;
              line-height: 50px;
              text-align: left;
              cursor: pointer;
              &:hover {
                color: #ec4141;
              }
              span {
                margin-left: 5px;
                padding: 0 10px;
                height: 30px;
                font-size: 14px;
                // background-color: #fff;
                border-radius: 15px;
              }
            }
          }
        }
        .active {
          background-color: #fdf5f5;
          color: #ec4141;
        }
      }
      .hot-type {
        position: absolute;
        top: 50%;
        margin-top: -9px;
        right: 0;
        li {
          float: left;
          margin: 0 3px;
          padding: 0 6px;
          height: 18px;
          line-height: 18px;
          font-size: 13px;
          color: #676767;
          cursor: default;
          &:hover {
            color: #373737;
          }
        }
        .active {
          color: #ec4141;
          background-color: #fdf5f5;
          border-radius: 9px;
          &:hover {
            color: #ec4141;
          }
        }
      }
    }
    .songGroupBox-body {
      margin-top: 10px;
      .songGroups {
        overflow: hidden;
        margin-left: -12px;
        /deep/ .song-group-box-card {
          float: left;
          margin-left: 12px;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
